<template>
<div class="main">
    <div class="top">
        <div  class="topbootom">        
        </div>
    </div>
    <div class="bootom">
        <div class="finsh">
          <h3>{{finsh}}</h3>
        </div>
        <div class="fail">
          <h3>{{fail}}</h3>
        </div>
        <div class="percentage">
          <h1>{{percentage}}</h1>
        </div>
    </div>

</div>

</template>

  <script>
  export default {
      data(){
          return{
            finsh:5,
            fail: 10,
            percentage: null,
            Time:[
                {
                    id:1,
                    finsh:10.0,
                    fail:6.0
                },
                {
                    id:2,
                    finsh:30,
                    fail:20
                },

            ]
          }
      },
      created(){
          this.find();
          this.percentaged();
      },
        methods: {
            percentaged:function(){
            this.percentage = ((this.fail/this.finsh)*100).toFixed(2)
        },
        find(){
            this.finsh=this.Time[1].finsh;
            this.fail=this.Time[1].fail;
        }
    }
} 
  </script>
  <style  scoped>
.main{
    background-color: gainsboro;
    width: 350px;
    height: 440px;
}
.top{
    width: 350px;
    height: 150px;
    background-color: goldenrod;
    background: url(../assets/percentage.png) no-repeat ;
	background-size: 100% 100%;
}
.bootom{
    float: left;
    width: 350px;
    height: 290px;
    background-color: green;
    background: url(../assets/percentage2.png) no-repeat ;
	background-size: 100% 100%;
}
.finsh{
    /* float: left; */
    width: 20px;
    height: 40px;
    /* background-color: aqua; */
    line-height: 40px;
    margin-top: 55px;
    margin-left: 15px;
}
.fail{
    width: 20px;
    height: 40px;
    /* background-color: rgb(255, 0, 13); */
    line-height: 40px;
    margin-top: 97px;
    margin-left: 15px;
}
.percentage{
    width: 60px;
    height: 80px;
    /* background-color: blueviolet; */
    margin-top: -155px;
    margin-left: 185px;
    text-align: center;
    line-height: 80px;
}
  </style>